<template>
	<globalModal :title="title" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" :destroyOnClose="true" :maskClosable="false">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off">
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级菜单">
					<a-tree-select
						placeholder="请选择上级菜单"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						:tree-data="treeData"
						show-search
						:replaceFields="replaceFields"
						@change="changeMenu"
						treeNodeFilterProp="title"
						v-decorator="[
							'parentId',
							{
								rules: [{ required: true, message: '请选择上级菜单' }]
							}
						]"
					/>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类型">
					<a-radio-group v-decorator="['type', { initialValue: '0' }]" @change="changeMenutype">
						<a-radio value="0">目录</a-radio>
						<a-radio value="1">菜单</a-radio>
						<a-radio value="2">按钮</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
					<a-input placeholder="名称" v-decorator="['name', { rules: [{ required: true, message: '名称' }, { max: 50, message: '名称不超过50个字符' }], getValueFromEvent: removeSpaces }]" />
				</a-form-item>
				<template v-if="menutype != 2">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="显示地址">
						<a-input placeholder="地址" v-decorator="['url', { rules: [{ required: true, message: '显示地址' }], getValueFromEvent: removeSpaces }]" />
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图标">
						<a-input placeholder="点击右侧按钮选择图标" v-decorator="['icon']"><a-icon slot="addonAfter" type="setting" @click="selectIcons" /></a-input>
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="默认跳转地址" extra="如果取第一个子集做了调整地址,设置为'redirect'">
						<a-input placeholder="默认跳转地址" v-decorator="['redirect', { getValueFromEvent: removeSpaces }]" />
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="在菜单中隐藏">
						<a-radio-group v-decorator="['hiddenInMenu', { initialValue: 1 }]">
							<a-radio :value="1">否</a-radio>
							<a-radio :value="0">是</a-radio>
						</a-radio-group>
					</a-form-item>
				</template>

				<template v-if="menutype == 1">
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接方式">
						<a-radio-group v-model="linkway">
							<a-radio :value="2">内部链接</a-radio>
							<a-radio :value="1">外部链接</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="外部链接地址" v-if="linkway == 1" extra="外部链接地址,类似http://www.baidu.com">
						<a-input placeholder="外部链接地址" v-decorator="['component', { rules: [{ required: true, message: '名称' }], getValueFromEvent: removeSpaces }]" />
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内部链接地址" v-if="linkway == 2" extra="内部链接地址,类似views/test.vue">
						<a-input placeholder="内部链接地址" v-decorator="['component', { rules: [{ required: true, message: '名称' }], getValueFromEvent: removeSpaces }]" />
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="组件名称">
						<a-input placeholder="组件名称" v-decorator="['componentName', { rules: [{ required: true, message: '组件名称' }], getValueFromEvent: removeSpaces }]" />
					</a-form-item>
					<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否缓存">
						<a-radio-group v-decorator="['cacheRoute', { initialValue: '1' }]">
							<a-radio value="1">否</a-radio>
							<a-radio value="0">是</a-radio>
						</a-radio-group>
					</a-form-item>
				</template>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限标识">
					<a-input placeholder="权限标识" v-decorator="['perms', { rules: [{ required: true, message: '权限标识' }], getValueFromEvent: removeSpaces }]" />
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序号" extra="数据越小越靠前">
					<a-input-number v-decorator="['orderNum', { initialValue: 1 }]" :min="1" style="width: 100%;" />
				</a-form-item>
			</a-form>
			<Icons :iconChooseVisible="iconChooseVisible" @close="iconChooseVisible = false" @choose="chooseIcon"></Icons>
		</a-spin>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import Icons from './icon/Icons';
export default {
	name: 'MenuListModal',
	mixins: [ModalMixins],
	data() {
		return {
			permissions: [],
			menutype: 0,
			linkway: 2,
			isAddRoot: false,
			iconChooseVisible: false,
			treeData: [],
			replaceFields: { children: 'children', title: 'name', key: 'menuId', value: 'menuId' },
			bodyStyle: {
				maxHeight: '450px',
				overflow: 'auto'
			}
		};
	},
	props: {
		MenuTree: {
			type: Array,
			default: () => []
		}
	},
	components: {
		Icons
	},
	created() {},
	methods: {
		//打开弹框初始事件
		getDefaultList() {
			this.getMenuTree();
			this.menutype = this.mdl.type || '0';
		},
		//新增数据回填
		setAddFieldsValue() {
			if (this.mdl.parentId) {
				this.form.setFieldsValue(this.$pick(this.mdl,'parentId'));
			}
		},

		//提交保存数据
		handleOk() {
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					/* 处理地址 */
					let { menuId } = this.mdl;
					let parameter = Object.assign({}, values, this.mdl.menuId ? { menuId: this.mdl.menuId } : '');
					this.saveInfo(this.isAdd ? this.api.add : this.api.edit, parameter);
				}
			});
		},
		getMenuTree() {
			this.treeData = [
				{
					menuId: 0,
					name: '根目录',
					children: [...this.MenuTree]
				}
			];
		},
		changeMenu(value) {
			console.log('value', value);
		},
		changeMenutype(e) {
			this.menutype = e.target.value;
		},
		chooseIcon(icon) {
			this.iconChooseVisible = false;
			this.form.setFieldsValue({
				icon: icon
			});
		},
		selectIcons() {
			this.iconChooseVisible = true;
		}
	}
};
</script>

<style scoped></style>
